<template>
  <!-- <div class="register absolute"> -->
    <!-- <div class="shading">
      <div class="pictrue acea-row row-center-wrapper">
        <img :src="logoUrl" v-if="logoUrl" />
        <img src="@assets/images/logo2.png" v-else />
      </div>
    </div>
    <div class="whiteBg" v-if="formItem === 1">
      <div class="title acea-row row-center-wrapper">
        <div
          class="item"
          :class="current === index ? 'on' : ''"
          v-for="(item, index) in navList"
          @click="navTap(index)"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="list" :hidden="current !== 0">
        <form @submit.prevent="submit">
          <div class="item">
            <div class="acea-row row-between-wrapper">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-phone_"></use>
              </svg>
              <input
                type="text"
                placeholder="输入手机号码"
                v-model="account"
                required
              />
            </div>
          </div>
          <div class="item">
            <div class="acea-row row-between-wrapper">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-code_"></use>
              </svg>
              <input
                type="password"
                placeholder="填写登录密码"
                v-model="password"
                required
              />
            </div>
          </div>
        </form>
        <div
          class="forgetPwd"
          @click="$router.push({ name: 'RetrievePassword' })"
        >
          <span class="iconfont icon-wenti"></span>忘记密码
        </div>
      </div>
      <div class="list" :hidden="current !== 1">
        <div class="item">
          <div class="acea-row row-between-wrapper">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-phone_"></use>
            </svg>
            <input type="text" placeholder="输入手机号码" v-model="account" />
          </div>
        </div>
        <div class="item">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_1"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
            />
            <button
              class="code"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              {{ text }}
            </button>
          </div>
        </div>
        <div class="item" v-if="isShowCode">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="codeVal"
            />
            <div class="code" @click="again"><img :src="codeUrl" /></div>
          </div>
        </div>
      </div>
      <div class="logon" @click="loginMobile" :hidden="current !== 1">登录</div>
      <div class="logon" @click="submit" :hidden="current === 1">登录</div>
      <div class="tip">
        没有账号?
        <span @click="formItem = 2" class="font-color-red">立即注册</span>
      </div>
    </div>
    <div class="whiteBg" v-else>
      <div class="title">注册账号</div>
      <div class="list">
        <div class="item">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-phone_"></use>
            </svg>
            <input type="text" placeholder="输入手机号码" v-model="account" />
          </div>
        </div>
        <div class="item">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_1"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
            />
            <button
              class="code"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              {{ text }}
            </button>
          </div>
        </div>
        <div class="item">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_"></use>
            </svg>
            <input
              type="password"
              placeholder="填写您的登录密码"
              v-model="password"
            />
          </div>
        </div>
        <div class="item" v-if="isShowCode">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="codeVal"
            />
            <div class="code" @click="again"><img :src="codeUrl" /></div>
          </div>
        </div>
      </div>
      <div class="logon" @click="register">注册</div>
      <div class="tip">
        已有账号?
        <span @click="formItem = 1" class="font-color-red">立即登录</span>
      </div>
    </div>
    <div class="bottom"></div> -->

    <div class="registerContainer">
      <div class="getCode">
        <div class="telAndcode">
          <div class="fonts">
            <img src="@assets/images/phone.png" alt="" />
            <h3>绑定手机号</h3>
            <!-- <p @click="noRegister()">游客模式</p> -->
          </div>
          <div class="tel">
            <input
              maxlength="11"
              type="text"
              placeholder="请输入11位手机号码"
              v-model="account"
              required
            />
          </div>
        </div>
        <div class="telAndcode">
          <div class="fonts">
            <img src="@assets/images/yanzheng.png" alt="" />
            <h3>验证码</h3>
            <!-- <p @click="noRegister()">游客模式</p> -->
          </div>
          <div class="code">
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
              maxlength="6"
            />
            <button
              v-if="disabled === true"
              class="sendCode"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              {{ text }}
            </button>
            <button
              v-if="disabled === false"
              class="sendCode"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              <img src="@assets/images/sendcode.png" alt="" />
            </button>
            <!-- <span class="secondVal"  v-else></span> -->
          </div>
        </div>
      </div>
      <div class="tips">
        <p>绑定说明:</p>
        <p>1、听见广播老用户绑定手机号码后,可同步共享APP内账户信息。</p>
        <p style="margin-bottom:0.8rem;">
          2、新用户绑定手机号码后，可通过手机号码登录听见广播APP后，同步微信端账户信息
        </p>
      </div>
      <div class="realRegister">
        <div class="logon" @click="loginMobile" >
          <p>
            <img src="@assets/images/sure.png" alt="" />
          </p>
        </div>
        <!-- <div class="logon" @click="submit" :hidden="current === 1">
          <p>
            <img src="@assets/images/sure.png" alt="" />
          </p>
        </div> -->
      </div>
    </div>
  <!-- </div> -->
</template>
<script>
import sendVerifyCode from "@mixins/SendVerifyCode";
import {
  login,
  loginMobile,
  registerVerify,
  register,
  getCodeApi
} from "@api/user";
import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import { getLogo } from "@api/public";
import dayjs from "dayjs";
import cookie from "@utils/store/cookie";
import { VUE_APP_API_URL } from "@utils";
import cbct from '../../assets/js/common/base.js';
import qs from 'qs';
import http from '../../assets/js/common/http.js'
import axios from 'axios';
const BACK_URL = "login_back_url";

export default {
  name: "Login",
  mixins: [sendVerifyCode],
  data: function() {
    return {
      navList: ["账号登录", "快速登录"],
      current: 1,
      account: "",
      password: "",
      captcha: "",
      formItem: 1,
      type: "login",
      logoUrl: "",
      keyCode: "",
      codeUrl: "",
      codeVal: "",
      isShowCode: false
    };
  },
  mounted: function() {
    // this.getCode();
    // this.getLogoImage();
  },
  methods: {
    code(){
   
      http.post(cbct.https()+'/v2/jubilee/send-code', qs.stringify({
           mobile:this.account,
        })).then((response)=>{
          if(response.c == cbct.code.successRes){ 
            
          }
        }
        ).catch((error)=>{console.log(error);})
    },
    // again() {
    //   this.codeUrl =
    //     VUE_APP_API_URL +
    //     "/sms_captcha?" +
    //     "key=" +
    //     this.keyCode +
    //     Date.parse(new Date());
    // },
    // getCode() {
     
    //   getCodeApi()
    //     .then(res => {
    //       this.keyCode = res.data.key;
    //     })
    //     .catch(res => {
    //       this.$dialog.error(res.msg);
    //     });
    // },
    // async getLogoImage() {
    //   let that = this;
    //   getLogo(2).then(res => {
    //     that.logoUrl = res.data.logo_url;
    //   });
    // },
    async loginMobile() {
      var that = this;
      const { account, captcha } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ]
          })
          .validate({ account, captcha });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
    
       axios.defaults.headers = {
            'Content-Type':'application/x-www-form-urlencoded',
        };
        axios.post(cbct.https()+'/admin/time', {  
        }).then(function (response) {
                if(response.data.c == cbct.code.successRes){
                    var timing = response.data.d.time - Date.parse(new Date());                
                      cbct.setCookie('timing',timing);
                    http.post(cbct.https()+'/ds/login-mobile', qs.stringify({
                      mobile:that.account,
                      code: that.captcha,
                    })).then((res)=>{
                      if(res.c == cbct.code.successRes){ 
                      let data = res.d.ds;
                      let newTime = Math.round(new Date() / 1000);
                      that.$store.commit(
                        "LOGIN",
                        data.token,
                        dayjs(data.expires_time) - newTime
                      );
                      const backUrl = cookie.get(BACK_URL) || "/";
                      cookie.remove(BACK_URL);
                      that.$router.replace({ path: backUrl });
                      }
                    }).catch((error)=>{console.log(error);})
                            } 
                    })
                    .catch(function (error) {
                  
                  });  

      // loginMobile({
      //   phone: that.account,
      //   captcha: that.captcha,
      //   spread: cookie.get("spread")
      // })
      //   .then(res => {
      //     let data = res.data;
      //     let newTime = Math.round(new Date() / 1000);
      //     that.$store.commit(
      //       "LOGIN",
      //       data.token,
      //       dayjs(data.expires_time) - newTime
      //     );
      //     const backUrl = cookie.get(BACK_URL) || "/";
      //     cookie.remove(BACK_URL);
      //     that.$router.replace({ path: backUrl });
      //   })
      //   .catch(res => {
      //     that.$dialog.error(res.msg);
      //   });
    },
    // async register() {
    //   var that = this;
    //   const { account, captcha, password } = that;
    //   try {
    //     await that
    //       .$validator({
    //         account: [
    //           required(required.message("手机号码")),
    //           chs_phone(chs_phone.message())
    //         ],
    //         captcha: [
    //           required(required.message("验证码")),
    //           alpha_num(alpha_num.message("验证码"))
    //         ],
    //         password: [
    //           required(required.message("密码")),
    //           attrs.range([6, 16], attrs.range.message("密码")),
    //           alpha_num(alpha_num.message("密码"))
    //         ]
    //       })
    //       .validate({ account, captcha, password });
    //   } catch (e) {
    //     return validatorDefaultCatch(e);
    //   }
    //   register({
    //     account: that.account,
    //     captcha: that.captcha,
    //     password: that.password,
    //     spread: cookie.get("spread")
    //   })
    //     .then(res => {
    //       that.$dialog.success(res.msg);
    //       that.formItem = 1;
    //     })
    //     .catch(res => {
    //       that.$dialog.error(res.msg);
    //     });
    // },
    // async code() {
    //   var that = this;
    //   const { account } = that;
    //   try {
    //     await that
    //       .$validator({
    //         account: [
    //           required(required.message("手机号码")),
    //           chs_phone(chs_phone.message())
    //         ]
    //       })
    //       .validate({ account });
    //   } catch (e) {
    //     return validatorDefaultCatch(e);
    //   }
    //   if (that.formItem == 2) that.type = "register";
    //   await registerVerify({
    //     phone: that.account,
    //     type: that.type,
    //     key: that.keyCode,
    //     code: that.codeVal
    //   })
    //     .then(res => {
    //       that.$dialog.success(res.msg);
    //       that.sendCode();
    //     })
    //     .catch(res => {
    //       if (res.data.status === 402) {
    //         that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
    //         that.isShowCode = true;
    //       }
    //       that.$dialog.error(res.msg);
    //     });
    // },
    // navTap: function(index) {
    //   this.current = index;
    // },
    // async submit() {
    //   const { account, password, codeVal } = this;
    //   try {
    //     await this.$validator({
    //       account: [
    //         required(required.message("账号")),
    //         attrs.range([5, 16], attrs.range.message("账号")),
    //         alpha_num(alpha_num.message("账号"))
    //       ],
    //       password: [
    //         required(required.message("密码")),
    //         attrs.range([6, 16], attrs.range.message("密码")),
    //         alpha_num(alpha_num.message("密码"))
    //       ],
    //       codeVal: this.isShowCode
    //         ? [
    //             required(required.message("验证码")),
    //             attrs.length(4, attrs.length.message("验证码")),
    //             alpha_num(alpha_num.message("验证码"))
    //           ]
    //         : []
    //     }).validate({ account, password, codeVal });
    //   } catch (e) {
    //     return validatorDefaultCatch(e);
    //   }
    //   let self = this;
    //   self.http.post(self.cbct.https()+'/h5/ds/login-mobile', self.qs.stringify({
    //        mobile:this.account,
    //        captcha: that.captcha,
    //     })).then((response)=>{
    //       if(response.c == self.cbct.code.successRes){ 
    //         this.$store.commit("LOGIN", data.token);
    //         const backUrl = cookie.get(BACK_URL) || "/";
    //         cookie.remove(BACK_URL);
    //        this.$router.replace({ path: backUrl });
    //       }
    //     }
    //     ).catch((error)=>{console.log(error);})
      // login({ account, password, code: codeVal })
      //   .then(({ data }) => {
      //     this.$store.commit("LOGIN", data.token);
      //     const backUrl = cookie.get(BACK_URL) || "/";
      //     cookie.remove(BACK_URL);
      //     this.$router.replace({ path: backUrl });
      //   })
      //   .catch(e => {
      //     this.$dialog.error(e.msg);
      //   });
  //   }
   }
};

</script>
<style scoped>
.code img {
  width: 100%;
  height: 100%;
}
.registerContainer {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 0 0.74rem;
  background-color: #fff;
}
.registerContainer .getCode .telAndcode {
  font-size: 0.24rem;
}
.registerContainer .getCode .telAndcode .fonts {
  display: flex;
  align-items: center;
  margin-top: 0.7rem;
}
.registerContainer .getCode .telAndcode .fonts h3 {
  font-size: 0.3rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: 0.22rem;
}
.registerContainer .getCode .telAndcode .fonts img {
  width: 0.48rem;
  height: 0.48rem;
}
.registerContainer .getCode .telAndcode .fonts p {
  font-size: 0.24rem;
}

.registerContainer .getCode .telAndcode .tel,
.registerContainer .getCode .telAndcode .code {
  width: 100%;
  height: 0.94rem;
  margin-bottom: 0.52rem;
  border-bottom: 0.02rem solid #e4e4e4;
}
.registerContainer .getCode .telAndcode .code {
  position: relative;
}
.registerContainer .getCode .telAndcode .code .codeInput {
  padding-right: 1.7rem;
  box-sizing: border-box;
  margin-bottom: 0.6rem;
}
.registerContainer .getCode .telAndcode .code span {
  position: absolute;
  display: block;
  width: 30%;
  height: 0.7rem;
  right: 2px;
  top: 2px;
  line-height: 0.7rem;
}
.registerContainer .getCode .telAndcode .code .sendCode {
  /* width: 1.98rem; */
  height: 0.94rem;
  position: absolute;
  display: inline-flex;
  right: 0.3rem;
  align-items: center;
  line-height: 0.94rem;
}
.registerContainer .getCode .telAndcode .code .on {
  width: 1.98rem;
  height: 0.94rem;
  position: absolute;
  display: inline-flex;
  right: 0;
  align-items: center;
}
.registerContainer .getCode .telAndcode .code .sendCode img {
  width: 1.98rem;
  height: 0.56rem;
}
.registerContainer .getCode .telAndcode .code .sendagin {
  line-height: 0.94rem;
}
.registerContainer .getCode .telAndcode input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  outline: none;
  border: none;
  background: rgba(255, 255, 255, 0.3);
}

.registerContainer .tips {
  text-align: left;
  margin: auto;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.7);
}
.registerContainer .tips p {
  margin-bottom: 0.12rem;
  line-height: 1.5;
}
.registerContainer .tips p:first-child {
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  font-size: 0.3rem;
}
.registerContainer .realRegister {
  font-size: 0.28rem;
}
.registerContainer .realRegister p {
  width: 100%;
  margin: auto;
  outline: none;
  margin-bottom: 0.44rem;
}
.registerContainer .realRegister p:last-child {
  margin-bottom: 0px;
  padding-bottom: 1.68rem;
}
.registerContainer .realRegister p img {
  width: 100%;
  display: block;
  cursor: pointer;
}
</style>
